<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"  href="../../../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../../../static/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <style>
        table, td{
            font:100% Arial, Helvetica, sans-serif;
        }
        table{width:100%;border-collapse:collapse;margin:1em 0;text-align: center}
        th, td{padding:.5em;border:1px solid #fff;}
        th{background:#1B9AF7 repeat-x;color:#fff;text-align: center}
        tr:nth-child(2n) td{background:#e5f1f4;}
        tr:nth-child(2n+1) td{background:#f8fbfc;}
        td.hewenqi, tr.hewenqi {
            color: green;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table id="emtable" class="table table-bordered hovertreeClass">
                <thead>
                <tr>
                    <th data-field="id">序号</th>
                    <th data-field="user_id">岗位代码</th>
                    <th data-field="name">岗位名称</th>
                    <th data-field="username">登录名</th>
                    <th data-field="dep">所属机构</th>
                    <th data-field="isstop">停用</th>
                    <th data-field="desc">描述</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script>
    var data=[
        {
            "id": 1,
            "user_id":"100001",
            "name": "张三",
            "sex": "男",
            "username":"abc",
            "dep":"研发部-行研组2",
            "isstop":"否",
            "desc":"Test"
        },
        {
            "id": 2,
            "user_id":"100005",
            "name": "李四",
            "sex": "男",
            "username":"efg",
            "dep":"研发部-行研组2",
            "isstop":"否",
            "desc":"Test"
        },
        {
            "id": 3,
            "user_id":"100009",
            "name": "王五",
            "sex": "女",
            "username":"xyz",
            "dep":"研发部-行研组1",
            "isstop":"否",
            "desc":""
        },
        {
            "id": 4,
            "user_id":"100032",
            "name": "赵六",
            "sex": "男",
            "username":"mmm",
            "dep":"研发部-行研组1",
            "isstop":"否",
            "desc":""
        }
    ];
    $(function(){
        $('#emtable').bootstrapTable({
            data:data
        });
    })
</script>
<script type="text/javascript">
    $(document).ready(function () {
//        var hover_index = 0;
//        $("table.hovertreeClass td").hover(function () {
//            hover_index = $(this).parent().find('td').index(this);
//            $("table.hovertreeClass tr").find("td:eq(" + hover_index + ")").addClass("hewenqi");
//            $(this).addClass("hewenqi");
//        }, function () {
//            $("table.hovertreeClass tr").find("td:eq(" + hover_index + ")").removeClass("hewenqi");
//            $(this).removeClass("hewenqi");
//        });

        $("table.hovertreeClass tbody tr td").hover(function () {
            $(this).addClass("hewenqi");
        }, function () {
            $(this).removeClass("hewenqi");
        });
    });
</script>
</body>